<template>
  <el-row>
    <el-col>
      <div v-for="(item, index) in nodes" :key="index" style="margin-bottom: 5px">
        <el-radio v-model="currentIndex" :label="index">{{ item.label }}</el-radio>
        <span class="text-center remove-options">
          <i class="el-icon-circle-close" @click="remove(index)" />
        </span>
      </div>
      <div style="margin-top: 18px">
        <span class="add-options" @click="add">
          <i class="el-icon-circle-plus-outline" />&nbsp;&nbsp;添加按钮
        </span>
      </div>
    </el-col>
    <el-col>
      <el-divider content-position="left">按钮选项</el-divider>
      <el-form-item label="UID">
        <el-input v-model="formData.props.uid" placeholder="请输入UID" maxlength="128" />
      </el-form-item>
      <el-form-item label="标签ID">
        <el-input v-model="formData.props.id" maxlength="128" placeholder="请输入标签ID" />
      </el-form-item>
      <el-form-item label="按钮名称">
        <el-input v-model="formData.label" maxlength="128" placeholder="请输入按钮名称" />
      </el-form-item>
      <el-form-item label="按钮颜色">
        <el-select v-model="formData.props.type">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
</template>
<script>
import { objectFormat } from "@/utils/tools";
export default {
  name: "VeButtonOption",
  model: {
    prop: "model",
  },
  props: {
    model: {
      type: Array,
      default() {
        return [];
      },
    },
    config: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
      options: [
        { label: "默认按钮", value: "" },
        { label: "主要按钮", value: "primary" },
        { label: "成功按钮", value: "success" },
        { label: "信息按钮", value: "info" },
        { label: "警告按钮", value: "warning" },
        { label: "危险按钮", value: "danger" },
      ],
    };
  },
  computed: {
    nodes: {
      get() {
        return this.model || [];
      },
    },
    formData() {
      return (
        this.nodes[this.currentIndex] || {
          props: {},
        }
      );
    },
  },
  methods: {
    add() {
      const len = this.nodes.length + 1;
      this.nodes.push({
        uid: "" + len,
        label: "按钮" + len,
        attrs: {},
        props: {
          id: undefined,
        },
        on: {},
      });
      this.$emit("input", this.nodes);
    },
    remove(i) {
      if (this.nodes.length === 1) return;
      this.nodes.splice(i, 1);
      this.$emit("input", this.nodes);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~element-ui/packages/theme-chalk/src/common/var.scss";
.el-row {
  margin-bottom: 10px;
}
.sep {
  text-align: center;
  color: #999;
  margin-top: 5px;
}
.remove-options {
  cursor: pointer;
  color: $--color-danger;
  i {
    margin: 8px 0 0 10px;
  }
}
.add-options {
  cursor: pointer;
  color: $--color-primary;
}
</style>
